<template>
  <div class="container">
    <div class="flex items-center justify-between mb-6">
      <div>
        <h1 class="page-title text-2xl font-bold">系统设置</h1>
        <p class="text-gray-500">配置系统参数和全局设置</p>
      </div>
    </div>
    
    <el-card shadow="hover" class="card-with-hover mb-6">
      <template #header>
        <div class="flex items-center">
          <el-icon class="mr-2"><Setting /></el-icon>
          <span class="font-bold">基本设置</span>
        </div>
      </template>
      
      <el-form 
        ref="basicFormRef" 
        :model="basicForm" 
        :rules="basicRules" 
        label-width="160px"
        class="form-container"
      >
        <el-form-item label="系统名称" prop="systemName">
          <el-input v-model="basicForm.systemName" placeholder="请输入系统名称" />
        </el-form-item>
        
        <el-form-item label="系统简称" prop="systemShortName">
          <el-input v-model="basicForm.systemShortName" placeholder="请输入系统简称" />
        </el-form-item>
        
        <el-form-item label="公司名称" prop="companyName">
          <el-input v-model="basicForm.companyName" placeholder="请输入公司名称" />
        </el-form-item>
        
        <el-form-item label="版权信息" prop="copyright">
          <el-input v-model="basicForm.copyright" placeholder="请输入版权信息" />
        </el-form-item>
        
        <el-form-item>
          <el-button type="primary" @click="saveBasicSettings" :loading="basicLoading">保存设置</el-button>
          <el-button @click="resetBasicForm">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    
    <el-row :gutter="20">
      <el-col :span="12">
        <el-card shadow="hover" class="card-with-hover">
          <template #header>
            <div class="flex items-center">
              <el-icon class="mr-2"><Warning /></el-icon>
              <span class="font-bold">安全设置</span>
            </div>
          </template>
          
          <el-form 
            ref="securityFormRef" 
            :model="securityForm" 
            :rules="securityRules" 
            label-width="180px"
            class="form-container"
          >
            <el-form-item label="登录密码过期天数" prop="passwordExpireDays">
              <el-input-number 
                v-model="securityForm.passwordExpireDays" 
                :min="0" 
                :max="365"
                :step="1"
                class="w-52"
              />
              <span class="text-gray-500 ml-2">天 (0表示永不过期)</span>
            </el-form-item>
            
            <el-form-item label="密码最小长度" prop="passwordMinLength">
              <el-input-number 
                v-model="securityForm.passwordMinLength" 
                :min="6" 
                :max="20"
                :step="1"
                class="w-52"
              />
              <span class="text-gray-500 ml-2">字符</span>
            </el-form-item>
            
            <el-form-item label="登录失败锁定次数" prop="loginFailLockCount">
              <el-input-number 
                v-model="securityForm.loginFailLockCount" 
                :min="0" 
                :max="10"
                :step="1"
                class="w-52"
              />
              <span class="text-gray-500 ml-2">次 (0表示不锁定)</span>
            </el-form-item>
            
            <el-form-item label="会话超时时间" prop="sessionTimeout">
              <el-input-number 
                v-model="securityForm.sessionTimeout" 
                :min="1" 
                :max="1440"
                :step="1"
                class="w-52"
              />
              <span class="text-gray-500 ml-2">分钟</span>
            </el-form-item>
            
            <el-form-item>
              <el-button type="primary" @click="saveSecuritySettings" :loading="securityLoading">保存设置</el-button>
              <el-button @click="resetSecurityForm">重置</el-button>
            </el-form-item>
          </el-form>
        </el-card>
      </el-col>
      
      <el-col :span="12">
        <el-card shadow="hover" class="card-with-hover">
          <template #header>
            <div class="flex items-center">
              <el-icon class="mr-2"><Bell /></el-icon>
              <span class="font-bold">通知设置</span>
            </div>
          </template>
          
          <el-form class="form-container">
            <el-form-item label="车辆保养到期提醒">
              <el-switch 
                v-model="notificationSettings.maintenance" 
                active-text="开启" 
                inactive-text="关闭"
              />
            </el-form-item>
            
            <el-form-item label="车辆保险到期提醒">
              <el-switch 
                v-model="notificationSettings.insurance" 
                active-text="开启" 
                inactive-text="关闭"
              />
            </el-form-item>
            
            <el-form-item label="年检到期提醒">
              <el-switch 
                v-model="notificationSettings.inspection" 
                active-text="开启" 
                inactive-text="关闭"
              />
            </el-form-item>
            
            <el-form-item label="驾驶证到期提醒">
              <el-switch 
                v-model="notificationSettings.driverLicense" 
                active-text="开启" 
                inactive-text="关闭"
              />
            </el-form-item>
            
            <el-form-item label="ETC卡余额提醒">
              <el-switch 
                v-model="notificationSettings.etcBalance" 
                active-text="开启" 
                inactive-text="关闭"
              />
            </el-form-item>
            
            <el-form-item label="加油卡余额提醒">
              <el-switch 
                v-model="notificationSettings.fuelCardBalance" 
                active-text="开启" 
                inactive-text="关闭"
              />
            </el-form-item>
            
            <el-form-item>
              <el-button type="primary" @click="saveNotificationSettings" :loading="notificationLoading">保存设置</el-button>
              <el-button @click="resetNotificationSettings">重置</el-button>
            </el-form-item>
          </el-form>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { ref, reactive, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import { Setting, Warning, Bell } from '@element-plus/icons-vue'

export default {
  name: 'SystemSettings',
  components: {
    Setting,
    Warning,
    Bell
  },
  setup() {
    // 基本设置表单
    const basicFormRef = ref(null)
    const basicLoading = ref(false)
    const basicForm = reactive({
      systemName: '车辆管理系统',
      systemShortName: '车管系统',
      companyName: '某某企业',
      copyright: '© 2023 某某企业'
    })
    
    // 基本设置验证规则
    const basicRules = {
      systemName: [
        { required: true, message: '请输入系统名称', trigger: 'blur' },
        { max: 50, message: '长度不能超过50个字符', trigger: 'blur' }
      ],
      systemShortName: [
        { required: true, message: '请输入系统简称', trigger: 'blur' },
        { max: 20, message: '长度不能超过20个字符', trigger: 'blur' }
      ],
      companyName: [
        { required: true, message: '请输入公司名称', trigger: 'blur' },
        { max: 50, message: '长度不能超过50个字符', trigger: 'blur' }
      ],
      copyright: [
        { required: true, message: '请输入版权信息', trigger: 'blur' },
        { max: 100, message: '长度不能超过100个字符', trigger: 'blur' }
      ]
    }
    
    // 安全设置表单
    const securityFormRef = ref(null)
    const securityLoading = ref(false)
    const securityForm = reactive({
      passwordExpireDays: 90,
      passwordMinLength: 8,
      loginFailLockCount: 5,
      sessionTimeout: 30
    })
    
    // 安全设置验证规则
    const securityRules = {
      passwordExpireDays: [
        { required: true, message: '请输入密码过期天数', trigger: 'blur' },
        { type: 'number', message: '密码过期天数必须为数字', trigger: 'blur' }
      ],
      passwordMinLength: [
        { required: true, message: '请输入密码最小长度', trigger: 'blur' },
        { type: 'number', message: '密码最小长度必须为数字', trigger: 'blur' }
      ],
      loginFailLockCount: [
        { required: true, message: '请输入登录失败锁定次数', trigger: 'blur' },
        { type: 'number', message: '登录失败锁定次数必须为数字', trigger: 'blur' }
      ],
      sessionTimeout: [
        { required: true, message: '请输入会话超时时间', trigger: 'blur' },
        { type: 'number', message: '会话超时时间必须为数字', trigger: 'blur' }
      ]
    }
    
    // 通知设置
    const notificationLoading = ref(false)
    const notificationSettings = reactive({
      maintenance: true,
      insurance: true,
      inspection: true,
      driverLicense: true,
      etcBalance: true,
      fuelCardBalance: true
    })
    
    // 获取基本设置
    const fetchBasicSettings = async () => {
      // 实际项目中应从API获取
      /*
      try {
        const res = await settingsApi.getBasic()
        Object.assign(basicForm, res.data)
      } catch (error) {
        console.error('获取基本设置失败:', error)
      }
      */
    }
    
    // 获取安全设置
    const fetchSecuritySettings = async () => {
      // 实际项目中应从API获取
      /*
      try {
        const res = await settingsApi.getSecurity()
        Object.assign(securityForm, res.data)
      } catch (error) {
        console.error('获取安全设置失败:', error)
      }
      */
    }
    
    // 获取通知设置
    const fetchNotificationSettings = async () => {
      // 实际项目中应从API获取
      /*
      try {
        const res = await settingsApi.getNotification()
        Object.assign(notificationSettings, res.data)
      } catch (error) {
        console.error('获取通知设置失败:', error)
      }
      */
    }
    
    // 保存基本设置
    const saveBasicSettings = async () => {
      if (!basicFormRef.value) return
      
      await basicFormRef.value.validate(async (valid, fields) => {
        if (valid) {
          basicLoading.value = true
          
          try {
            // 实际项目中应调用API
            /*
            await settingsApi.saveBasic(basicForm)
            */
            
            // 模拟API调用
            await new Promise(resolve => setTimeout(resolve, 1000))
            
            ElMessage.success('基本设置保存成功')
          } catch (error) {
            ElMessage.error('基本设置保存失败')
            console.error('保存基本设置失败:', error)
          } finally {
            basicLoading.value = false
          }
        } else {
          console.error('表单验证失败:', fields)
        }
      })
    }
    
    // 保存安全设置
    const saveSecuritySettings = async () => {
      if (!securityFormRef.value) return
      
      await securityFormRef.value.validate(async (valid, fields) => {
        if (valid) {
          securityLoading.value = true
          
          try {
            // 实际项目中应调用API
            /*
            await settingsApi.saveSecurity(securityForm)
            */
            
            // 模拟API调用
            await new Promise(resolve => setTimeout(resolve, 1000))
            
            ElMessage.success('安全设置保存成功')
          } catch (error) {
            ElMessage.error('安全设置保存失败')
            console.error('保存安全设置失败:', error)
          } finally {
            securityLoading.value = false
          }
        } else {
          console.error('表单验证失败:', fields)
        }
      })
    }
    
    // 保存通知设置
    const saveNotificationSettings = async () => {
      notificationLoading.value = true
      
      try {
        // 实际项目中应调用API
        /*
        await settingsApi.saveNotification(notificationSettings)
        */
        
        // 模拟API调用
        await new Promise(resolve => setTimeout(resolve, 1000))
        
        ElMessage.success('通知设置保存成功')
      } catch (error) {
        ElMessage.error('通知设置保存失败')
        console.error('保存通知设置失败:', error)
      } finally {
        notificationLoading.value = false
      }
    }
    
    // 重置基本设置表单
    const resetBasicForm = () => {
      if (basicFormRef.value) {
        basicFormRef.value.resetFields()
      }
    }
    
    // 重置安全设置表单
    const resetSecurityForm = () => {
      if (securityFormRef.value) {
        securityFormRef.value.resetFields()
      }
    }
    
    // 重置通知设置
    const resetNotificationSettings = () => {
      Object.assign(notificationSettings, {
        maintenance: true,
        insurance: true,
        inspection: true,
        driverLicense: true,
        etcBalance: true,
        fuelCardBalance: true
      })
    }
    
    // 初始化
    onMounted(() => {
      fetchBasicSettings()
      fetchSecuritySettings()
      fetchNotificationSettings()
    })
    
    return {
      basicFormRef,
      basicForm,
      basicRules,
      basicLoading,
      securityFormRef,
      securityForm,
      securityRules,
      securityLoading,
      notificationSettings,
      notificationLoading,
      saveBasicSettings,
      saveSecuritySettings,
      saveNotificationSettings,
      resetBasicForm,
      resetSecurityForm,
      resetNotificationSettings
    }
  }
}
</script>

<style scoped>
.page-title {
  position: relative;
  margin-bottom: 4px;
}

.page-title::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 40px;
  height: 3px;
  background-color: var(--el-color-primary);
  border-radius: 3px;
}

.card-with-hover {
  transition: all 0.3s;
  border-radius: 8px;
  margin-bottom: 20px;
}

.card-with-hover:hover {
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
}

.form-container {
  padding: 20px 0;
}
</style> 